import React, { Fragment, Component } from 'react'
import { connect } from 'react-redux'
import { getTranslationList } from './store/actions'
import { Redirect } from 'react-router-dom'
import { Helmet } from 'react-helmet'

class Translation extends Component {
  componentDidMount() {
    if (!this.props.list.length) this.props.getTranslationList()
  }
  render() {
    const { list, isLogin } = this.props
    return isLogin ? (
      <Fragment>
        <Helmet>
          <meta charSet="utf-8" />
          <title>欢迎来到翻译页面 - Translation 组件</title>
          <meta name="description" content="翻译页面的描述就是可以有描述" />
        </Helmet>
        {list.map(item => (
          <div key={item.id}>{item.title}</div>
        ))}
      </Fragment>
    ) : (
      <Fragment>
        <Redirect to="/" />
      </Fragment>
    )
  }
}

Translation.loadData = store => {
  return store.dispatch(getTranslationList())
}

const mapStateToProps = state => ({
  list: state.translation.translationList,
  isLogin: state.header.isLogin
})

const mapDispatchToProps = dispatch => ({
  getTranslationList() {
    dispatch(getTranslationList())
  }
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Translation)
